<template>
  <div class="chart-wrap">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane :label="tabName[0]" name="chart1">
        <chart1 :actived="tabActiveArr[0]" :chartName="tabName[0]"></chart1>
      </el-tab-pane>
      <el-tab-pane :label="tabName[1]" name="chart2">
        <chart2 :actived="tabActiveArr[1]" :chartName="tabName[1]"></chart2>
      </el-tab-pane>
      <el-tab-pane :label="tabName[2]" name="chart3">
        <chart3 :actived="tabActiveArr[2]" :chartName="tabName[2]"></chart3>
      </el-tab-pane>
      <el-tab-pane :label="tabName[3]" name="chart4">
        <chart4 :actived="tabActiveArr[3]" :chartName="tabName[3]"></chart4>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
import { getStatistics1ChartData } from "@/api/first-loan.js";
import { Select, Option, Tabs, TabPane } from "element-ui";
import Chart1 from "./components/Chart1";
import Chart2 from "./components/Chart2";
import Chart3 from "./components/Chart3";
import Chart4 from "./components/Chart4";
export default {
  name: "first-loan-chart",
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    Chart1,
    Chart2,
    Chart3,
    Chart4
  },
  data() {
    return {
      tabActiveArr: [false, false, false, false],
      tabName: [
        "首贷户专项统计当月（户数-利率）",
        "首贷户专项统计当月（授信金额-贷款余额）",
        "分类型贷款余额",
        "分银行"
      ],
      reportDate: [],
      selectedDate: null,
      classfyData: null,
      activeName: null
    };
  },
  mounted() {
    this.activeName = "chart1";
    this.determinActiveTabs(this.activeName);
    const _this = this;
    var erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementsByClassName("chart-wrap"), function(
      element
    ) {
      var width = element.offsetWidth;
      var height = element.offsetHeight;
      _this.$nextTick(function() {
        //使echarts尺寸重置
        // this.drawAllChart();
      });
    });
  },
  methods: {
    handleClick(tab, event) {
      this.determinActiveTabs(tab.name);
    },
    determinActiveTabs(tabName) {
      let index = null;
      if (tabName === "chart1") {
        index = 0;
      } else if (tabName === "chart2") {
        index = 1;
      } else if (tabName === "chart3") {
        index = 2;
      } else if (tabName === "chart4") {
        index = 3;
      } else {
        index = 0;
      }
      this.tabActiveArr[index] = true;
    },
    drawAllChart() {
      this.drawMainChart(this.mainChart1);
      this.drawMainChart(this.mainChart2);
    },
    drawMainChart(chartData) {
      chartData.chartInstance = echarts.init(
        document.getElementById(chartData.domId)
      );
      chartData.chartInstance.resize();
      chartData.chartInstance.setOption({
        title: {
          text: chartData.chartTitle,
          left: "center",
          align: "right"
        },
        xAxis: {
          type: "category",
          data: chartData.category
        },
        yAxis: [
          {
            name: chartData.yAxisName[0],
            type: "value"
          },
          {
            name: chartData.yAxisName[1],
            type: "value"
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          data: chartData.legend,
          left: 10
        },
        series: [
          {
            name: chartData.legend[0],
            data: chartData.series1,
            type: "line",
            smooth: true
          },
          {
            name: chartData.legend[1],
            data: chartData.series2,
            type: "line",
            smooth: true,
            yAxisIndex: 1
          }
        ]
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.chart-wrap {
  width: 100%;
  height: 100%;

  #main-chart1, #main-chart2 {
    width: 100%;
    height: 350px;
  }

  .classify-wrap {
    padding-left: 10px;

    .el-select {
      display: inline-block;
      padding-left: 10px;
    }
  }
}
</style>